<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>孟孟哒个人博客 — 专治各种不服BUG</title>
    <meta charset="UTF-8">
</head>
<body>
<jsp:include page="common/header.jsp"/>
<!--导航条-->
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont">&#xe67f;</i> <a href="index.html" class="c-primary">首页</a> <span
            class="c-gray en">&gt;</span> <span class="c-gray">留言板</span></div>
</nav>

<section class="container">
    <div class="col-xs-12 col-md-10 col-md-offset-1 mt-20">
        <!--用于评论-->
        <div class="mt-20" id="ct">
            <div id="err" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
            <textarea id="textarea1" name="comment" style="height:200px;" placeholder="看完不留一发？"> </textarea>
            <div class="text-r mt-10">
                <button onclick="addMessage()" class="btn btn-primary radius"> 发表评论</button>
            </div>
        </div>

        <div class="line"></div>

        <ul class="commentList mt-50" id="commentList">
            <c:forEach items="${messages.list}" var="msg">
                <li class="item cl">
                    <a href="#"><i class="avatar size-L radius">
                        <img alt="" src="${msg.user.avatar}"></i></a>
                    <div class="comment-main">
                        <header class="comment-header">
                            <div class="comment-meta"><a class="comment-author" href="#">${msg.user.nickname}</a>
                                <time class="f-r">
                                    <fmt:formatDate value="${msg.createdDate}" pattern="yyyy-MM-dd HH:mm"/>
                                </time>
                            </div>
                        </header>
                        <div class="comment-body">
                                ${msg.content}
                            <ul class="commentList" id="replyList-${msg.id}">
                                <c:forEach var="reply" items="${msg.replies}">
                                    <li class="item cl"><a href="#"><i class="avatar size-L radius">
                                        <img alt="" src="${reply.user.avatar}"></i></a>
                                        <div class="comment-main">
                                            <header class="comment-header">
                                                <div class="comment-meta">
                                                    <a class="comment-author" href="#">${reply.user.nickname}</a>
                                                    <time class="f-r">
                                                        <fmt:formatDate value="${reply.createdDate}"
                                                                        pattern="yyyy-MM-dd HH:mm"/>
                                                    </time>
                                                </div>
                                            </header>
                                            <div class="comment-body">
                                                <p>${reply.content}</p>
                                            </div>
                                        </div>
                                    </li>
                                </c:forEach>
                            </ul>
                            <button class="hf f-r btn btn-default size-S mt-10" name="${msg.id}"
                                    onclick="showReply(this)">回复
                            </button>
                        </div>
                    </div>
                </li>
            </c:forEach>
        </ul>
        <!--用于回复-->
        <div class="comment hidden mt-20">
            <div id="err2" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
            <textarea class="textarea" style="height:100px;"> </textarea>
            <button onclick="addReply(this);" type="button" class="btn btn-primary radius mt-10">回复</button>
            <a class="cancelReply f-r mt-10" onclick="cancelReply(this)">取消回复</a>
        </div>
        <div style="width: 100%;padding-top:30px;text-align:center">
            <c:if test="${messages.hasPreviousPage}">
                <span class="pageNav"><a href="<%=request.getContextPath()%>/message/list.html?pageNum=${messages.pageNum-1}">上一页</a></span>
            </c:if>
            <c:forEach begin="${messages.navigateFirstPage}" end="${messages.navigateLastPage}" var="pn">
                <span class="pageNav"><a href="<%=request.getContextPath()%>/message/list.html?pageNum=${pn}" class="${messages.pageNum==pn?'hover':''}">${pn}</a></span>
            </c:forEach>
            <c:if test="${messages.hasNextPage}">
                <span class="pageNav"><a href="<%=request.getContextPath()%>/message/list.html?pageNum=${messages.pageNum+1}">下一页</a></span>
            </c:if>
        </div>
    </div>
</section>
<style type="text/css">
    .pageNav {
        color: #000;
    }
    .hover{color: red}
</style>
<jsp:include page="common/footer.jsp"/>
<link rel="stylesheet" type="text/css"
      href="<%=request.getContextPath()%>/media/plugin/wangEditor/css/wangEditor.min.css">
<script type="text/javascript"
        src="<%=request.getContextPath()%>/media/plugin/wangEditor/js/wangEditor.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("img.lazyload").lazyload({failurelimit: 3});
        wangEditor.config.printLog = false;
        var editor1 = new wangEditor('textarea1');
        editor1.config.menus = ['insertcode', 'quote', 'bold', '|', 'img', 'emotion', '|', 'undo', 'fullscreen'];
        editor1.config.emotions = {
            'default': {title: '表情', data: '<%=request.getContextPath()%>/media/plugin/wangEditor/emotions1.data'},
            'default2': {title: '心情', data: '<%=request.getContextPath()%>/media/plugin/wangEditor/emotions3.data'},
            'default3': {title: '顶一顶', data: '<%=request.getContextPath()%>/media/plugin/wangEditor/emotions2.data'}
        };
        editor1.create();
    });
    var pId;

    function showReply(obj) {
        pId = $(obj).attr("name");
        $(obj).parents(".commentList").find(".cancelReply").trigger("click");
        $(obj).parents(".comment-body").append($(".comment").clone(true));
        $(obj).parents(".comment-body").find(".comment").removeClass("hidden");
        $(obj).hide();
    }

    function cancelReply(obj) {
        $(obj).parents(".comment-body").find(".hf").show();
        $(obj).parents(".comment-body").find(".comment").remove();
    }

    function addMessage() {
        $.ajax({
            url: "<%=request.getContextPath()%>/message/add.html",
            data: "content=" + $("#textarea1").val(),
            method: "post",
            success: function (data) {
                if (data.status) {
                    var message = data.message;
                    var str = '<li class="item cl"><a href="#"><i class="avatar size-L radius"><img alt="" src="'
                        + message.user.avatar + '"></i></a><div class="comment-main"><header class="comment-header">' +
                        '<div class="comment-meta"><a class="comment-author" href="#">' + message.user.nickname + '</a><time class="f-r">' +
                        message.createdDate +
                        '</time></div></header>' +
                        '<div class="comment-body">' +
                        message.content +
                        '<ul class="commentList" id="replyList-' + message.id + '"></ul><button class="hf f-r btn btn-default size-S mt-10" name="' + message.id + '" onclick="showReply(this)">回复</button></div></div></li>';
                    $("#commentList").prepend(str);
                    $("#textarea1").val("")
                } else if (!data.login) {
                    alert("请重新登录")
                }

            }
        })
    }

    function addReply(obj) {
        var content = $(obj).parents(".comment-body").find(".comment textarea").val();
        $.ajax({
            url: "<%=request.getContextPath()%>/message/add.html",
            data: "content=" + content + "&replyId=" + pId,
            method: "post",
            success: function (data) {
                if (data.status) {
                    var message = data.message;
                    var str = '<li class="item cl"><a href="#"><i class="avatar size-L radius">' +
                        '<img alt="" src="' + message.user.avatar + '"></i></a><div class="comment-main"><header class="comment-header">' +
                        '<div class="comment-meta"><a class="comment-author" href="#">' + message.user.nickname + '</a><time class="f-r">' +
                        message.createdDate + '</time></div></header><div class="comment-body"><p>' + message.content + '</p></div></div></li>';
                    $("#replyList-" + pId).append(str);
                    cancelReply(obj);
                } else if (!data.login) {
                    alert("请重新登录")
                }
            }
        })
    }
</script>
</body>
</html>
